@use '../SIcon/style' as *;
@use '../STextEllipsis/style' as *;

.s-card-1 {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  border-radius: 0.25rem;
  transition: box-shadow 0.3s ease-in-out;
  cursor: pointer;

  .s-card-1__top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .s-card-1__top__left {
      display: flex;
      align-items: center;

      .s-card-1__top__left__icon {
        padding: 0.3rem;
        margin-right: 0.5rem;
        border-radius: 0.25rem;
      }

      .s-card-1__top__left__title {
        .s-card-1__top__left__sub-title {
          margin-top: 0.375rem;
          font-size: 0.875rem;
          color: #9498a3;
        }
      }
    }

    .s-card-1__top__right {
      color: #4b5563;
    }
  }
}

.s-card-1--box-shadow {
  box-shadow: 0 0 5px 0 rgba(100, 100, 111, 0.25);
}

.s-card-1--hover-box-shadow:hover {
  box-shadow: 0 0 10px 0 rgba(100, 100, 111, 0.35);
}
